<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '首页',
	},
}
</route>
<template>
	<view :style="{ paddingTop: barHeight + 'rpx', width: '100%' }"></view>
	<view class="mod">
		<view class="body">
			<view index="88" class="group">
				<view
					class="block"
					:style="{
						paddingTop: barHeight + 10 + 'rpx',
						backgroundColor: isTouch ? '#fff' : 'transparent',
					}"
					v-if="auth.getLoginStatus()"
				>
					<view index="87" class="nick-name-wrapper" @tap="toPersonalCenter">
						<text index="85" class="nick-name">{{ userStore.userInfo.user_name }}</text>
						<!-- <view
					style="
						background: #fff;
						border-radius: 50%;
						margin: 13rpx 0 0 13rpx;
						height: 20rpx;
						padding: 5rpx;
					"
				>
					<uv-icon name="arrow-down" color="#2979ff" size="10"></uv-icon>
				</view> -->
					</view>
					<image
						index="86"
						:src="userStore.userInfo.user_avatar || userStore.userInfo.avatar"
						class="picture"
						:style="{ top: barHeight + 'rpx' }"
						@tap="toPersonalCenter"
					/>
				</view>
				<image
					index="61"
					:src="bannerList[0].cover_image"
					class="banner"
					:style="{ marginTop: '-' + barHeight + 'rpx', width: '100%' }"
					@tap="toBannerActive"
				/>
				<view class="w-[100%]" style="background-color: #fff">
					<view class="block-1">
						<view class="container-item-0" @tap="toCommonRead">
							<image index="65" :src="baseImg + '/ic-jihua.png'" class="image" />
							<text index="84" class="caption font-bold">共读计划</text>
						</view>
						<view class="container-item-1" @tap="toClass">
							<image index="6" :src="baseImg + '/ic-guanli.png'" class="figure" />
							<text index="79" class="title font-bold">班级管理</text>
						</view>
						<view class="container-item-2" @tap="toReadActive">
							<image index="64" :src="baseImg + '/ic-huodong.png'" class="bitmap" />
							<text index="78" class="title-1 font-bold">展演活动</text>
						</view>
						<view class="container-item-3" @tap="toSharedBookstore">
							<image index="62" :src="baseImg + '/ic-shuba.png'" class="picture-1" />
							<text index="77" class="caption-1 font-bold">共享书屋</text>
						</view>
					</view>

					<view class="block-2" v-if="auth.getLoginStatus() && !isObjectEmpty(pantFormPlanList)">
						<view class="container">
							<view class="wrapper">
								<text index="71" class="title-2 font-bold">倍阅共读计划</text>
								<view index="17" class="caption-wrapper">
									<text index="16" class="caption-2">{{ plantForomClass }}</text>
								</view>
							</view>
							<view class="inline-block text-[#919191] text-[22rpx] pt-[15rpx]" @tap="toAllPlan(1)">
								全部
								<uni-icons type="forward" color="#919191" size="12"></uni-icons>
							</view>
						</view>
						<view index="3" class="container-1">
							<swiper
								class="swiper"
								circular
								:indicator-dots="true"
								:autoplay="true"
								:interval="2000"
								:duration="500"
								@change="plantformChange"
							>
								<swiper-item v-for="(value, key, index) in pantFormPlanList" :key="key">
									<view class="grid">
										<view
											index="5"
											class="col"
											v-for="(item, index1) in value"
											:key="index1"
											@tap="
												linkUrl(
													'/pages/pages-readingPlan/readingPlan-beiyueDetails/index?plan_id=' +
														item.id,
												)
											"
										>
											<image :src="item.cover_img" mode="aspectFit" />
											<!-- <text index="4" class="title-4">{{ item.title }} </text>
										<text index="3" class="caption-3">{{ getPlanStatusToTex(item.status) }} </text> -->
										</view>
									</view>
								</swiper-item>
							</swiper>
							<!-- <view class="wrapper-2">
							<view index="2" class="layer" />
							<view index="0" class="mask" />
							<view index="1" class="overlayer" />
						</view> -->
						</view>
					</view>

					<view class="block-3">
						<view class="container">
							<view class="wrapper">
								<text index="71" class="title-2 font-bold">班级共读计划</text>
								<view index="17" class="caption-wrapper">
									<text index="16" class="caption-2">{{ gradeClass }}</text>
								</view>
							</view>
							<view
								class="inline-block text-[#919191] text-[22rpx] pt-[15rpx]"
								@tap="toAllPlan(2)"
								v-if="!noClass && !classPlanListEmpty"
							>
								全部
								<uni-icons type="forward" color="#919191" size="12"></uni-icons>
							</view>
						</view>
					</view>
					<view class="container-gdjh">
						<swiper
							class="swiper"
							circular
							:indicator-dots="true"
							:autoplay="true"
							:interval="2000"
							:duration="500"
							@change="classPlanChange"
							v-if="!noClass && !classPlanListEmpty"
						>
							<swiper-item v-for="(value, key, index) in classPlanList" :key="key">
								<view
									index="14"
									class="block-4"
									v-for="(item, index1) in value"
									:key="index1"
									@tap="
										linkUrl(
											'/pages/pages-readingPlan/readingPlan-studentDetails/index?plan_id=' +
												item.id,
										)
									"
								>
									<text index="13" class="caption-7 font-bold">{{ item.title }}</text>
									<text index="12" class="title-6">{{
										dayjs(item.start_time * 1000).format('YYYY年MM月DD日') +
										' - ' +
										dayjs(item.end_time * 1000).format('YYYY年MM月DD日')
									}}</text>
									<view index="11" class="container-4">
										<view class="flex items-center">
											<text class="text-[25rpx] text-[#34A4E2] ml-2"
												>{{ item.join_total }}人已参与</text
											>
											<text class="text-[25rpx] text-[#919191] ml-2"
												>{{ item.no_total }}人待参与</text
											>
											<text class="text-[25rpx] text-[#46C853] ml-2"
												>{{ item.complete_total }}人已完成</text
											>
										</view>
										<image index="9" :src="baseImg + '/gengduo.png'" class="icon-right-2" />
									</view>
								</view>
							</swiper-item>
						</swiper>
						<view v-if="noClass">
							<view style="width: 220rpx; margin: 25rpx 40rpx 25rpx 20rpx; float: left">
								<image :src="baseImg + '/class-login.png'" class="w-[220rpx] h-[200rpx]"></image>
							</view>
							<view style="width: calc(100% - 300rpx); float: left">
								<view class="w-full flex justify-center items-center flex-col mt-8">
									<text class="text-[#474747] text-[32rpx]">您还未加入班级哦~</text>
								</view>
								<view class="w-full grid grid-cols-2 gap-x-4">
									<view
										@tap="linkUrl('/pages/class/join/index')"
										class="mt-4 w-[180rpx] rounded-[50rpx] h-[60rpx] flex justify-center items-center text-[#fff] text-[32rpx] class-BtnLs"
										>加入班级</view
									>
									<view
										@tap="linkUrl('/pages/class/add/index')"
										class="mt-4 w-[180rpx] rounded-[50rpx] h-[60rpx] flex justify-center items-center text-[#fff] text-[32rpx] class-login-btn"
										>创建班级</view
									>
								</view>
							</view>
						</view>
						<!-- 本班暂无共读计划 -->
						<view v-if="auth.getLoginStatus() && !noClass && classPlanListEmpty">
							<view style="width: 160rpx; margin: 30px 20px 25px 20px; float: left">
								<image
									:src="baseImg + '/class_noreadingPlan.png'"
									class="w-[160rpx] h-[160rpx]"
								></image>
							</view>
							<view style="width: calc(100% - 300rpx); float: left">
								<view
									class="w-full items-center flex-col mt-[60rpx]"
									style="text-align: right; display: block"
								>
									<text class="text-[#474747] text-[40rpx] font-bold">本班暂无共读计划</text>
								</view>
								<view style="float: right; width: auto">
									<view
										@tap="linkUrl('/pages/releasePlan/one/index')"
										class="mt-[45rpx] rounded-[50rpx] h-[60rpx] text-[#fff] text-[32rpx]"
										style="background-color: #ef8058; padding: 0 20rpx; line-height: 60rpx"
										>去发布共读计划</view
									>
								</view>
							</view>
						</view>
					</view>
					<view class="block-5">
						<text index="66" class="caption-8 font-bold">优读教师 </text>
						<view class="container-6">
							<view
								index="60"
								class="wrapper-3"
								v-for="(item, index) in execellentTeacherList"
								v-if="execellentTeacherList.length > 0"
							>
								<image v-if="index == 0" :src="baseImg + '/jiaoshi_diyi.png'" class="image-1-bg" />
								<image v-else :src="baseImg + '/jiaoshi_dier.png'" class="image-1-bg" />
								<view class="teacherIndex_box">
									<view class="group-1">
										<image
											v-if="index == 0"
											:src="item.avatar"
											class="image-1 rounded-[50%]"
											style="border: #f7cf32 6rpx solid"
										/>
										<image
											v-else-if="index == 1"
											:src="item.avatar"
											class="image-1 rounded-[50%]"
											style="border: #f88a76 6rpx solid"
										/>
										<image
											v-else-if="index == 2"
											:src="item.avatar"
											class="image-1 rounded-[50%]"
											style="border: #6ed278 6rpx solid"
										/>
										<image
											v-else
											:src="item.avatar"
											class="image-1 rounded-[50%]"
											style="border: #cfb75b 6rpx solid"
										/>
										<view index="32" class="tag-wrapper">
											<view class="tag-wrapper-imgBg">
												<image
													v-if="index == 0"
													:src="baseImg + '/diyi.png'"
													class="tag-wrapper-bg"
												/>
												<image
													v-else-if="index == 1"
													:src="baseImg + '/dier.png'"
													class="tag-wrapper-bg"
												/>
												<image
													v-else-if="index == 2"
													:src="baseImg + '/disan.png'"
													class="tag-wrapper-bg"
												/>
												<image v-else :src="baseImg + '/dissi.png'" class="tag-wrapper-bg" />

												<text index="31" class="tag">{{ item.integral }}分 </text>
											</view>
										</view>
									</view>
									<text index="33" class="title-8 font-bold">{{ item.user_name }} </text>
								</view>
							</view>
						</view>
					</view>

					<view class="px-4 mb-6" v-for="itemPartBook in partBookList">
						<view class="w-full flex justify-between items-center mb-3">
							<view class="text-[#303030] text-[33rpx] font-bold px-3">{{
								itemPartBook.name
							}}</view>
							<view
								class="inline-block text-[#919191] text-[22rpx]"
								@tap="linkUrl('/pages-book/index?classify_id=' + itemPartBook.id)"
							>
								更多
								<uni-icons type="forward" color="#919191" size="12"></uni-icons>
							</view>
						</view>
						<view class="w-full flex justify-between items-center">
							<view
								class="w-[212rpx] flex flex-col items-center"
								v-for="item in itemPartBook.book_list"
								@tap="linkUrl('/pages-book/details/index?id=' + item.id)"
							>
								<image class="w-full h-[250rpx] rounded-[40rpx]" :src="item.cover_img"></image>
								<text
									class="text-[#303030] inline-block max-w-full text-[25rpx] mt-1 font-bold truncate"
									>{{ item.name }}</text
								>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import useChangeTabbar from '@/hooks/useChangeTabbar';
import auth from '@/utils/auth';
import pinia, { useUserStore } from '@/store';
import { Teacher, getExecellentTeacher } from '@/service/teacher/index';
import { getPartBookListApi } from '@/service/book';
import { ref } from 'vue';
import { Plan, getPlanListApi, getTopBannerApi } from '@/service/plan';
import { getPlanStatusToTex, getGradToTex, initializeApp } from '@/utils/index';
import { toAuthPage } from '@/utils/jump';
import dayjs from 'dayjs';
import { systemInfo } from '@/utils/getSystemInfo';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const { statusBarHeight } = systemInfo();
const barHeight = ref(0);

const isTouch = ref(false);
onPageScroll(e => {
	const { scrollTop } = e;
	if (scrollTop * 2 < 320) {
		isTouch.value = false;
	} else {
		isTouch.value = true;
	}
});

const linkUrl = (url = '') => {
	if (!url) return;
	if (!auth.getLoginStatus()) toAuthPage();
	uni.navigateTo({ url });
};
onLoad(() => {
	barHeight.value = statusBarHeight; // 手机状态栏高度
});

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);

const userStore = useUserStore(pinia);
const isLogin = ref(false);

const toBannerActive = () => {
	// 跳转登录是否 验证授权
	if (auth.getLoginStatus()) {
		uni.navigateTo({
			url: '/pages/pages-readingPlan/readingPlan/index',
		});
	} else {
		toAuthPage();
	}
};

const toClass = () => {
	// 跳转登录是否 验证授权
	if (auth.getLoginStatus()) {
		uni.switchTab({
			url: '/pages/class/index',
		});
	} else {
		toAuthPage();
	}
};

const toCommonRead = () => {
	// 跳转登录是否 验证授权
	if (auth.getLoginStatus()) {
		uni.navigateTo({
			url: '/pages/pages-readingPlan/readingPlan/index',
		});
	} else {
		toAuthPage();
	}
};

const toSharedBookstore = () => {
	wx.showToast({
		title: '正在建设中，敬请期待',
		icon: 'none',
		duration: 1000,
		mask: true,
	});
};

// doubleReadList
const doubleReadList = ref([
	{
		image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
		title: '丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由',
	},
	{
		image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
		title: '明月几时有？把酒问青天',
	},
	{
		image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
		title: '不知天上宫阙，今夕是何年',
	},
]);

const execellentTeacherList = ref([]);
const getExecellentTeacherList = async (num: number) => {
	// 用户允许获取手机号
	try {
		const res = await getExecellentTeacher(num);
		if (res.status_code === 200) {
			console.log('========>getExecellentTeacherList', res);
			execellentTeacherList.value = res.data;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '登录失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};
const partBookList = ref([]);
const getPartBookList = async () => {
	try {
		const res = await getPartBookListApi();
		if (res.status_code === 200) {
			const resData = res.data;
			partBookList.value = [...res.data];
			// console.log('========>getPartBookList', partBookList.value);
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPartBookListerror', error);
		uni.hideLoading();
	}
};

const isObjectEmpty = (obj: any) => {
	if (obj && typeof obj === 'object') {
		return !Object.keys(obj).length;
	}
	return true; // 如果不是对象，则也视为“空”
};
const plantForomClass = ref('一年级');
const pantFormPlanList = ref<Plan.PlantFormData>();
const gradeClass = ref('');
const classPlanList = ref<Plan.ClassData>();
const noClass = ref(false); //教师没有绑定班级
const classPlanListEmpty = ref(false); //没有班级计划
const getPlanList = async (type: number, is_all: number, row: number, line: number) => {
	try {
		if (
			!userStore.userInfo.class_list ||
			(type == 2 && userStore.userInfo.class_list.length == 0)
		) {
			noClass.value = true;
			return;
		}
		const res = await getPlanListApi({ type, is_all, row, line });
		if (res.status_code === 200) {
			const resData: any = res.data;
			if (type === 1) {
				pantFormPlanList.value = resData;
				plantformChange({ detail: { current: 0 } });
			} else {
				classPlanList.value = resData;
				console.log('======>getPlanList', classPlanList.value, isObjectEmpty(classPlanList.value));

				noClass.value = false;
				if (isObjectEmpty(classPlanList.value)) {
					classPlanListEmpty.value = true;
				} else {
					classPlanListEmpty.value = false;
				}
				if (!noClass.value) {
					//有班级才切换
					classPlanChange({ detail: { current: 0 } });
				}
			}
		} else {
			if (type === 2 && res.status_code == 400) {
				noClass.value = true;
			}
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '获取失败~',
			});
		}
	} catch (error) {
		console.log('========>getPlanPlanformListerror', error);
		uni.hideLoading();
	}
};

const plantformChange = (event: any) => {
	const arrayFromObj = Object.entries(pantFormPlanList.value).map(([key, value]) => ({
		key,
		value,
	}));
	plantForomClass.value = getGradToTex(arrayFromObj[event.detail.current].key);
};
const classPlanChange = (event: any) => {
	const arrayFromObj = Object.entries(classPlanList.value).map(([key, value]) => ({ key, value }));
	gradeClass.value = arrayFromObj[event.detail.current].value[0].class_name;
};

const toPersonalCenter = () => {
	// 跳转登录是否 验证授权
	if (auth.getLoginStatus()) {
		uni.switchTab({
			url: `/pages/my/index`,
		});
	} else {
		toAuthPage();
	}
};

const toAllPlan = (type: number) => {
	// 跳转登录是否 验证授权
	if (auth.getLoginStatus()) {
		uni.navigateTo({
			url: `/pages/pages-readingPlan/readingPlan/index`,
		});
	} else {
		toAuthPage();
	}
};
const toReadActive = () => {
	uni.navigateToMiniProgram({
		appId: 'wx62add167a6ada00d', // 替换成目标小程序的真实appid
		path: 'pagesC/index', // 替换成目标小程序的具体页面路径
		envVersion: 'release', // 根据需要选择版本
		success: function (res) {
			console.log('成功跳转到其他小程序');
		},
		fail: function (err) {
			console.log('跳转失败', err);
		},
	});
};
useChangeTabbar(0);
const bannerList = ref();
const getTopBanner = async () => {
	// 获取顶部banner
	try {
		const res = await getTopBannerApi();
		if (res.status_code === 200) {
			console.log('========>getExecellentTeacherList', res);
			bannerList.value = res.data;
		} else {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: res.message || '登录失败~',
			});
		}
	} catch (error) {
		uni.hideLoading();
	}
};

onShow(async () => {
	console.log('========>onMounted', auth.getLoginStatus());
	if (!auth.getLoginStatus() && !uni.getStorageSync('isLogout')) {
		const slientLogin: any = await auth.getUserSlientInfo();
	}
	initializeApp(
		getTopBanner(),
		getPlanList(1, 1, 2, 2),
		getPlanList(2, 1, 1, 5),
		getExecellentTeacherList(4),
		getPartBookList(),
	);
	//
});
</script>

<style lang="scss">
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.wx-swiper-dots .wx-swiper-dot {
	width: 10rpx;
	height: 10rpx;
	border-radius: 50%;
	background: #c6c6c8;
}
.class-login-btn {
	background: #f4c421;
	margin-bottom: 20px;
}

.class-BtnLs {
	background: #2ba5e0;
}
.swiper .wx-swiper-dot.wx-swiper-dot-active {
	width: 40rpx;
	height: 10rpx;
	border-radius: 10rpx;
	background: #909192;
}

.mod {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 750rpx;
	z-index: 2;
}

.body {
	position: relative;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 750rpx;
}

.group {
	display: flex;
	flex-direction: column;
	align-self: flex-start;
	justify-content: flex-start;
	width: 750rpx;
	padding: 0 0 45.1rpx;
}

.block {
	position: fixed;
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 100%;
	height: 100rpx;
	z-index: 2;
	top: 0;
	left: 0;
}

.nick-name-wrapper {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	justify-content: flex-start;
	padding: 2.1rpx 30rpx 1.4rpx 8.3rpx;
	margin-left: 66rpx;
	background-color: rgb(240 240 240 / 100%);
	border-radius: 0 40px 40px 0;
}

.nick-name {
	align-self: flex-start;
	margin-left: 30rpx;
	font-size: 26.4rpx;
	font-style: normal;
	line-height: 54.2rpx;
	color: rgb(27 27 27 / 100%);
	text-align: left;
	text-decoration: none;
	letter-spacing: 0;
	white-space: nowrap;
}

.picture {
	position: absolute;
	left: 7.6rpx;
	width: 79.2rpx;
	height: 79.2rpx;
	border-radius: 50%;
}

.banner {
	align-self: center;
	width: 100%;
	height: 533rpx;
	z-index: 1;
	top: 0;
	left: 0;
}

.block-1 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: flex-start;
	width: 700rpx;
	height: 119rpx;
	margin-top: 35.4rpx;
	margin-left: 25rpx;
}

.container-item-0 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 159.1rpx;
	height: 119.1rpx;
}

.image {
	align-self: center;
	width: 83.3rpx;
	height: 85.4rpx;
	margin-right: 0.7rpx;
}

.caption {
	align-self: center;
	max-width: 159rpx;
	margin-top: 11.5rpx;
	overflow: hidden;
	font-size: 22rpx;
	font-style: normal;
	line-height: 22rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: 0;
	white-space: nowrap;
}

.container-item-1 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 159rpx;
	height: 119rpx;
	margin-left: 20.5rpx;
}

.figure {
	align-self: center;
	width: 77.8rpx;
	height: 86.8rpx;
	margin-right: 1.4rpx;
}

.title {
	align-self: center;
	max-width: 159rpx;
	margin-top: 10.1rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: 0;
	white-space: nowrap;
}

.container-item-2 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 159rpx;
	height: 119.1rpx;
	padding-top: 0.7rpx;
	margin-left: 22.2rpx;
}

.bitmap {
	align-self: center;
	width: 84.7rpx;
	height: 85.4rpx;
}

.title-1 {
	align-self: center;
	max-width: 159rpx;
	margin-top: 10.8rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: 0;
	white-space: nowrap;
}

.container-item-3 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 159rpx;
	height: 119.1rpx;
	padding-top: 5.5rpx;
	margin-left: 20.5rpx;
}

.picture-1 {
	align-self: center;
	width: 83.3rpx;
	height: 79.9rpx;
	margin-left: 2.1rpx;
}

.caption-1 {
	align-self: center;
	max-width: 159rpx;
	margin-top: 16rpx;
	overflow: hidden;
	font-size: 22.2rpx;
	font-style: normal;
	line-height: 22.2rpx;
	color: rgb(48 48 48 / 100%);
	text-align: left;
	text-decoration: none;
	text-overflow: ellipsis;
	letter-spacing: 0;
	white-space: nowrap;
}

.block-2 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 700rpx;
	min-height: 350rpx;
	margin-top: 44.1rpx;
	margin-left: 25rpx;

	.container {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 683.3rpx;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 307rpx;
		height: 53.5rpx;
		padding-top: 0.7rpx;
		margin-left: 17.4rpx;
	}

	.title-2 {
		align-self: center;
		font-size: 33rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		white-space: nowrap;
	}

	.caption-wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 92.4rpx;
		padding: 8.3rpx 8.3rpx 8.9rpx;
		margin-top: 0.1rem;
		margin-bottom: 0;
		background-color: #f2f3f5;
		border-radius: 8.3rpx;
	}

	.caption-2 {
		align-self: flex-start;
		max-width: 70.1rpx;
		margin-right: 2.8rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 20.8rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wrapper-1 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 61.8rpx;
		height: 53.5rpx;
		margin-right: 20.8rpx;
	}

	.title-3 {
		align-self: center;
		font-size: 22.2rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.icon-right {
		align-self: center;
		width: 11.1rpx;
		height: 16rpx;
	}

	.container-1 {
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 682.6rpx;
		padding: 15.3rpx 8.3rpx 18rpx;
		margin: 11.1rpx 0.7rpx 0 0;
		background-color: rgb(253 255 255 / 100%);
		border-radius: 31.25rpx;
		box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);

		.swiper {
			height: 260rpx !important;
		}
	}

	.grid {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 680rpx;
	}

	.col {
		position: relative;
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 319.4rpx;
		height: 166.7rpx;
		padding: 22.2rpx 8.3rpx 37.5rpx;
		margin-left: 0.7rpx;
		background-origin: padding-box;
	}

	.col image {
		position: absolute;
		z-index: 1;
		width: 319.4rpx;
		height: 166.7rpx;
	}

	.title-4 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.7rpx;
		margin-top: 10rpx;
		margin-left: 18.1rpx;
		overflow: hidden;
		font-size: 26.4rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.caption-3 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.7rpx;
		margin-left: 18.1rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.col-2 {
		position: relative;
		display: flex;
		flex-direction: column;
		align-self: center;
		justify-content: flex-start;
		width: 319.4rpx;
		height: 166.7rpx;
		padding: 22.2rpx 8.3rpx 36.8rpx;
		background-origin: padding-box;
	}

	.col-2 image {
		position: absolute;
		z-index: 1;
		width: 319rpx;
		height: 166.7rpx;
	}

	.time {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.7rpx;
		margin-top: 10rpx;
		margin-left: 18.1rpx;
		overflow: hidden;
		font-size: 26.4rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.title-5 {
		z-index: 2;
		align-self: flex-start;
		max-width: 266.7rpx;
		margin-left: 18rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(255 255 255 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.4rpx;
		white-space: nowrap;
	}

	.wrapper-2 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 653.5rpx;
		margin-top: 13.9rpx;
	}

	.layer {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.5rpx;
	}

	.mask {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.5rpx;
	}

	.overlayer {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.5rpx;
	}
}

.block-3 {
	display: flex;
	flex-direction: row;
	align-self: center;
	justify-content: space-between;
	width: 700rpx;
	height: 54rpx;
	margin-top: 41rpx;
	margin-left: 25rpx;

	.container {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 683.3rpx;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: auto;
		height: 53.5rpx;
		padding-top: 0.7rpx;
		margin-left: 17.4rpx;
	}

	.title-2 {
		align-self: center;
		font-size: 33rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: -0.7rpx;
		white-space: nowrap;
	}

	.caption-wrapper {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: auto;
		padding: 8.3rpx 8.3rpx 8.9rpx;
		margin-top: 0.1rem;
		margin-bottom: 0;
		margin-left: 15rpx;
		background-color: #f2f3f5;
		border-radius: 8.3rpx;
	}

	.caption-2 {
		align-self: flex-start;
		margin-right: 2.8rpx;
		overflow: hidden;
		font-size: 20.8rpx;
		font-style: normal;
		line-height: 20.8rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.4rpx;
		white-space: nowrap;
	}

	.wrapper-1 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 61.8rpx;
		height: 53.5rpx;
		margin-right: 20.8rpx;
	}

	.title-3 {
		align-self: center;
		font-size: 22.2rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: 0;
		white-space: nowrap;
	}

	.icon-right {
		align-self: center;
		width: 11.1rpx;
		height: 16rpx;
	}
}
.container-gdjh {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682.6rpx;
	padding: 0 8.3rpx;
	margin: 11.1rpx 0.7rpx 0 25rpx;
	background-color: rgb(253 255 255 / 100%);
	border-radius: 31.25rpx;
	box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);

	.swiper {
		height: 300rpx;
	}
}
.block-4 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 682.6rpx;
	height: 210rpx;
	padding: 31.9rpx 8.3rpx 0;
	margin: 10.4rpx 0.7rpx 0 0;

	.caption-7 {
		align-self: flex-start;
		max-width: 621.5rpx;
		margin-left: 22.2rpx;
		overflow: hidden;
		font-size: 37.5rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.75rpx;
		white-space: nowrap;
	}

	.title-6 {
		align-self: flex-start;
		max-width: 621.5rpx;
		margin-left: 22.2rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(144 144 144 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.container-4 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: space-between;
		width: 624.3rpx;
		padding: 20rpx 8.3rpx;
		margin-top: 33.5rpx;
		background-color: rgb(249 249 249 / 100%);
		border-radius: 31.2rpx;
	}

	.title-7 {
		align-self: center;
		margin-left: 18.75rpx;
		font-size: 25rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(51 163 225 / 100%);
		text-align: left;
		text-decoration: none;
		letter-spacing: -0.5rpx;
		white-space: pre;
	}

	.icon-right-2 {
		align-self: center;
		width: 25rpx;
		height: 22.9rpx;
		margin: 0 18.75rpx 2.1rpx 0;
	}

	.container-5 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: center;
		width: 624.3rpx;
		padding: 13.2rpx 0 18.1rpx;
	}

	.layer-1 {
		align-self: center;
		width: 24.3rpx;
		height: 9rpx;
		background-color: rgb(143 144 146 / 100%);
		border-radius: 3.5rpx;
	}

	.mask-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.6rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.5rpx;
	}

	.overlayer-1 {
		align-self: center;
		width: 9rpx;
		height: 9rpx;
		margin-left: 7.7rpx;
		background-color: rgb(197 198 200 / 100%);
		border-radius: 3.5rpx;
	}
}

.block-5 {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-content: flex-start;
	width: 100%;
	height: 380rpx;

	.caption-8 {
		align-self: flex-start;
		max-width: 650rpx;
		margin: 41.7rpx 0 0 41.7rpx;
		overflow: hidden;
		font-size: 33rpx;
		font-style: normal;
		line-height: 54.2rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.7rpx;
		white-space: nowrap;
	}

	.container-6 {
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: flex-start;
		width: 712.5rpx;
		margin-top: 1.4rpx;
		z-index: 1;
	}

	.wrapper-3 {
		position: relative;
		display: block;
		float: left;
		justify-content: flex-start;
		width: 180rpx;
		height: 170rpx;
		padding: 45rpx 0;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-origin: padding-box;
		background-size: 100% 100%;
		z-index: 2;

		.image-1-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 187rpx;
			height: 260rpx;
			z-index: 1;
		}
	}

	.group-1 {
		position: relative;
		display: block;
		float: left;
		width: 100%;
	}

	.image-1 {
		float: left;
		margin: 0 calc((100% - 110rpx) / 2);
		width: 104rpx;
		height: 104rpx;
		border-radius: 50%;
	}

	.tag-wrapper {
		position: absolute;
		bottom: -7.6rpx;
		left: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 120rpx;
		height: 36rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		background-origin: padding-box;
		background-size: 100% 100%;
		transform: translate(-50%);
	}

	.tag {
		position: absolute;
		z-index: 2;
		align-self: flex-start;
		width: 120rpx;
		height: 36rpx;
		overflow: hidden;
		font-size: 16rpx;
		font-style: normal;
		line-height: 30rpx;
		color: #fff;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-8 {
		width: 100%;
		float: left;
		text-align: center;
		margin-top: 20rpx;
		height: 35rpx;
		line-height: 35rpx;
		overflow: hidden;
		font-size: 12px;
		font-size: 25rpx;
		color: #303030;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.wrapper-item-0 {
		display: flex;
		flex-direction: column;
		align-self: flex-end;
		justify-content: flex-start;
		width: 157.6rpx;
		height: 170rpx;
		padding: 35.4rpx 8.3rpx 25rpx;
		margin: 0 0 20.1rpx 2.1rpx;
		background-color: rgb(255 255 255 / 100%);
		border-radius: 31.25rpx;
		box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);
	}

	.group-2 {
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: flex-start;
		width: 104.9rpx;
	}

	.figure-1 {
		align-self: flex-start;
		width: 104.2rpx;
		height: 104.2rpx;
	}

	.label-wrapper {
		position: absolute;
		bottom: -7.6rpx;
		left: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 120.2rpx;
		height: 36rpx;
		background-origin: padding-box;
		transform: translateX(-50%);
	}

	.label {
		position: absolute;
		z-index: 2;
		align-self: flex-start;
		width: 120.2rpx;
		height: 36rpx;
		overflow: hidden;
		font-size: 16rpx;
		font-style: normal;
		line-height: 30rpx;
		color: #fff;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-9 {
		align-self: center;
		max-width: 138.2rpx;
		margin: 22.9rpx 0 0 1.4rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 25rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.wrapper-item-1 {
		display: flex;
		flex-direction: column;
		align-self: flex-end;
		justify-content: flex-start;
		width: 157.6rpx;
		height: 170rpx;
		padding: 35.4rpx 8.3rpx 25rpx;
		margin: 0 0 20.1rpx 17.4rpx;
		background-color: rgb(255 255 255 / 100%);
		border-radius: 31.25rpx;
		box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);
	}

	.group-3 {
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: flex-start;
		width: 104.9rpx;
	}

	.bitmap-1 {
		align-self: flex-start;
		width: 104.2rpx;
		height: 104.2rpx;
	}

	.tag-wrapper-1 {
		position: absolute;
		bottom: -7.6rpx;
		left: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 120.2rpx;
		height: 36rpx;
		background-origin: padding-box;
		transform: translateX(-50%);
	}

	.tag-1 {
		position: absolute;
		z-index: 2;
		align-self: flex-start;
		width: 120.2rpx;
		height: 36rpx;
		overflow: hidden;
		font-size: 16rpx;
		font-style: normal;
		line-height: 30rpx;
		color: #fff;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.title-10 {
		align-self: center;
		max-width: 139.6rpx;
		margin: 22.9rpx 0 0 0.7rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 25rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.wrapper-item-2 {
		display: flex;
		flex-direction: column;
		align-self: flex-end;
		justify-content: flex-start;
		width: 157.6rpx;
		height: 170rpx;
		padding: 35.4rpx 8.3rpx 25rpx;
		margin: 0 0 20.1rpx 17.4rpx;
		background-color: rgb(255 255 255 / 100%);
		border-radius: 31.25rpx;
		box-shadow: 0 4.9rpx 20.8rpx 0 rgb(0 0 0 / 7%);
	}

	.group-4 {
		position: relative;
		display: flex;
		flex-direction: row;
		align-self: center;
		justify-content: flex-start;
		width: 106.25rpx;
	}

	.picture-2 {
		align-self: flex-start;
		width: 104.2rpx;
		height: 104.2rpx;
	}

	.word-wrapper {
		position: absolute;
		bottom: -7.6rpx;
		left: 50%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		width: 120.2rpx;
		height: 36rpx;
		background-origin: padding-box;
		transform: translateX(-50%);
	}

	.word {
		position: absolute;
		z-index: 2;
		align-self: flex-start;
		width: 120.2rpx;
		height: 36rpx;
		overflow: hidden;
		font-size: 16rpx;
		font-style: normal;
		line-height: 30rpx;
		color: #fff;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.caption-9 {
		align-self: center;
		max-width: 138.2rpx;
		margin: 22.9rpx 0 0 1.4rpx;
		overflow: hidden;
		font-size: 25rpx;
		font-style: normal;
		line-height: 25rpx;
		color: rgb(48 48 48 / 100%);
		text-align: left;
		text-decoration: none;
		text-overflow: ellipsis;
		letter-spacing: -0.5rpx;
		white-space: nowrap;
	}

	.tag-wrapper-imgBg {
		position: relative;
		width: 120.2rpx;
		height: 36rpx;

		.tag-wrapper-bg {
			position: absolute;
			z-index: 1;
			width: 120.2rpx;
			height: 36rpx;
		}
	}
}
.teacherIndex_box {
	width: calc(100% - 28rpx);
	float: left;
	margin: 0 0 0 18rpx;
	z-index: 3;
	position: absolute;
	top: 48rpx;
	left: 0;
}
</style>
<style lang="scss" scoped>
page {
	&::after {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 1rpx;
		content: '';
		background: transparent;
		box-shadow: 0rpx -2rpx 20rpx 2rpx rgb(165 165 165 / 34%);
	}
}
.uni-navbar__header {
	height: 100rpx !important;
}
</style>
